<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--潘天赐-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>
<!--[[${session.showPriceId}]]-->
<!--[[${session.productId}]]-->

<form id="myForm">
<h3>第一步 填写报价单</h3>
<table id="myTable"></table>
<h3>第二步 填写服务项报价</h3>
<table class="table">
    <thead>
    <tr>
        <th>服务名称</th>
        <th>价格(元)</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>运费</td>
        <td>
            <input type="text" name="freight" id="freight" onblur="aprice()" onkeyup="yz_freight()" placeholder="请输入大于0的数字" class="form-control" style="width:150px;">
            <span style="color: red" id="span_freight"></span>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>组装费</td>
        <td><input type="text" name="assemblingCharge" id="assemblingCharge" onblur="aprice()" class="form-control" style="width:150px;"></td>
        <td></td>
    </tr>
    <tr>
        <td>其他<input type="text" name="otherBusiness" class="form-control" style="width:200px;"></td>
        <td><input type="text" name="businessPrice" id="businessPrice" onblur="aprice()" class="form-control" style="width:150px;"></td>
        <td><button type="button" onclick="" class="btn btn-default">移除</button></td>
    </tr>
    <tr>
        <td colspan="3">
            备注：<textarea name="offerFormRemark" style="width:200px;"></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            附件：
            <!--上传图片-->
            <div class="row" style="height: 400px">
                <input id="file‐Portrait" type="file" name="file">
                <input type="hidden" name="offerFormAccessory" id="offerFormAccessory1"><!-- 隐藏域 -->
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            供货周期(天)：<input type="text" id="deliveryCycle" name="deliveryCycle" onkeyup="yz_cycle()" placeholder="请输入正整数" class="form-control" style="width:200px;">
            <span style="color: red" id="span_cycle"></span>
        </td>
    </tr>
    <tr>
        <td colspan="1">
            报价有效时间(天)：<input type="date" id="offerFormValidTime" name="offerFormValidTime" onkeyup="yz_time()" placeholder="报价有效期需大于供货周期。" class="form-control" style="width:400px;">
            <span style="color: red" id="span_time"></span>
        </td>
        <td>
            项目总价：<input type="text" id="totalPrices" name="totalPrices" class="form-control" style="width:200px;">
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <button type="button" onclick="addOffer()" class="btn btn-info" style="width:200px;">发送报价</button>
        </td>
    </tr>
    </tbody>
</table>
</form>


</body>
<script>
    /*$(function (){
        var id = [[${session.showPriceId}]];
        alert(id)
    })*/

    $("#myTable").bootstrapTable({
        url:"queryMaterials",
        columns:[
            {field:'materialsType',title:'类目'},
            {field:'materialsName',title:'材料名称'},
            {field:'materialsId',title:'材料编码'},
            {field:'materialsCount',title:'材料数量',
                formatter: function(value,row,index){
                    return '<input type="hidden" id="materialsCount" value="'+row.materialsCount+'" class="form-control" style="width:50px;">'+
                        '<input type="hidden" name="materialsInventoryId" value="'+row.materialsInventoryId+'" class="form-control" style="width:50px;">'+value
                }
            },
            {field:'',title:'品牌',width:120,
                formatter: function(value,row,index){
                    return '<input type="text" name="brand" class="form-control">';
                }
            },
            {field:'',title:'单价（元）',width:150,
                formatter: function(value,row,index){
                    return '<input type="text" name="price" id="price" onblur="aprice()" onkeyup="yz_price()" placeholder="请输入大于0的数字" class="form-control">'+
                    '<span style="color: #ff0000" id="span_price"></span>'
                }
            },
        ],
        pagination:true,			//是否展示分页
        pageNumber:1,				//当前页
        pageList:[1,3,5],			//分页组件
        sidePagination : 'client',	//分页方式：client客户端分页，server服务端分页
    })
    //计算总价
    function aprice() {
        var price = $("#price").val();
        var count = $("#materialsCount").val();
        var freight = $("#freight").val();
        var assemblingCharge = $("#assemblingCharge").val();
        var businessPrice = $("#businessPrice").val();
        if (price==""){
            price=0;
        }
        if (count==""){
            count=0;
        }
        if (freight==""){
            freight=0;
        }
        if (assemblingCharge==""){
            assemblingCharge=0;
        }
        if (businessPrice==""){
            businessPrice=0;
        }
        var a = price*count+eval(freight)+eval(assemblingCharge)+eval(businessPrice);
        $("#totalPrices").val(a);
    }
    //新增报价单
    function addOffer() {
        $.ajax({
            url: "addOffer",
            data: $("#myForm").serialize(),//获取表单的值
            success: function () {
                alert("成功")
            }
        });
    }
    //验证价格是否为正数
    function yz_price(){
        var price = $("#price").val()
        var span = $("#span_price")
        var reg = /^[1-9]\d*$/
        if (reg.test(price)){
            span.text("")
            return true
        }else{
            span.text("*请输入大于0的数字")
            return false
        }
    }
    //验证运费是否为正数
    function yz_freight(){
        var freight = $("#freight").val()
        var span = $("#span_freight")
        var reg = /^[1-9]\d*$/
        if (reg.test(freight)){
            span.text("")
            return true
        }else{
            span.text("*请输入大于0的数字")
            return false
        }
    }
    //验证供货周期是否为正整数
    function yz_cycle(){
        var deliveryCycle = $("#deliveryCycle").val()
        var span = $("#span_cycle")
        var reg = /^[1-9]\d*$/
        if (reg.test(deliveryCycle)){
            span.text("")
            return true
        }else{
            span.text("*请输入正整数")
            return false
        }
    }
    //验证报价有效期需是否大于供货周期
    function yz_time(){
        /*var offerFormValidTime = $("#offerFormValidTime").val()
        var date = new Date();
        alert(offerFormValidTime)
        alert(date)*/

        /*var span = $("#span_time")
        var reg = /^[1-9]\d*$/
        if (reg.test(offerFormValidTime)){
            span.text("")
            return true
        }else{
            span.text("*报价有效期需大于供货周期")
            return false
        }*/
    }


    //初始化fileinput控件（第一次初始化）//上传图片
    $('#file‐Portrait').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "upload", //上传的地址
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        maxFileCount: 100,
        enctype: 'multipart/form‐data',
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn‐primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon‐king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        success:function(data){
        }    });
    $("#file‐Portrait").on("fileuploaded", function (event, data, previewId, index) {
        console.log(data.response.aa);
        $("#offerFormAccessory1").val(data.response.aa);
    })
</script>
</html>